<style type="text/less">
    @import "/web/public/public.less";
    #left-nav.course{
        .btn{
            width: 110px;
            background: #054d8b;
            font-size: 24px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 40px;
            letter-spacing: 2px;
            color: #ffffff;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
        }
        .nav{
            .nav_list{
                margin-top: 30px;
                position: relative;
                .nav_wrap{
                    text-align: right;
                    .nav_title{
                        display: inline-block;
                    }
                }
                .nav_title{
                    font-size: 18px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 24px;
                    letter-spacing: 1px;
                    color: #333333;
                    display:block;
                    text-align: right;
                    &:hover{
                        color: #e60012;
                    }
                }
                .nav_sub{
                    margin-top: 14px;
                    a{
                        height: 16px;
                        overflow: hidden;
                        display: block;
                        text-align: right;
                        font-size: 16px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 1px;
                        color: #7f7f7f;
                        &:hover{
                            color: #e60012;
                        }
                    }
                    a:nth-child(2){
                        padding-top: 18px;

                    }
                }
                .nav_pop{
                    position: absolute;
                    left: 110px;
                    top: -40px;
                    overflow: hidden;
                    width: 296px;
                    display: none;
                    z-index: 999;
                    #triangle-left {
                        width: 0;
                        height: 0;
                        border-top: 10px solid transparent;
                        border-right: 20px solid #ffffff;
                        border-bottom: 10px solid transparent;
                        display:inline-block;
                        vertical-align: middle;
                        filter:drop-shadow(0px 1px 1px #dbdbdb)
                    }
                    .pop_center{
                        width: 270px;
                        background: #ffffff;
                        display:inline-block;
                        box-shadow:#dbdbdb -1px 1px 1px;
                        vertical-align: middle;
                        margin-left: -1px;
                        padding: 14px 0;
                        a{
                            display: inline-block;
                            width: 105px;
                            font-size: 16px;
                            font-weight: normal;
                            font-stretch: normal;
                            line-height: 36px;
                            letter-spacing: 1px;
                            color: #7f7f7f;
                            padding-left: 20px;
                            &:hover{
                                color: #e60012;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
<script src="/web/lib/less.min.js"></script>
<div id="left-nav" class="course">
    <div class="btn">采购人</div>
    <!-- 导航 -->
    <ul class="nav">
        <li class="nav_list">
            <a href="${"${domain}/web/purchaserList/1.html?id=102010101&column=采购人"}" target="_blank" class="nav_title" title="采购人">采购人</a>
            <div class="nav_sub">
                <a href="${"${domain}/web/tagList/1.html?id=204"}" target="_blank" title="中央">中央</a>
                <a href="${"${domain}/web/tagList/1.html?id=205"}" target="_blank" title="地方">地方</a>
            </div>
        </li>
        <li class="nav_list">
            <a href="${"${domain}/web/purchaserList/1.html?id=102010201&column=高校院所"}" target="_blank" class="nav_title" title="高校院所">高校院所</a>
            <div class="nav_sub"></div>
        </li>
        <li class="nav_list">
            <a href="${"${domain}/web/purchaserList/1.html?id=102010102&column=意向公开"}" target="_blank" class="nav_title" title="意向公开">意向公开</a>
            <div class="nav_sub"></div>
        </li>
        <li class="nav_list">
            <a href="${"${domain}/web/purchaserList/1.html?id=102010301&column=采购文件"}" target="_blank" class="nav_title" title="采购文件">采购文件</a>
            <div class="nav_sub">
                <a href="${"${domain}/web/purchaserList/1.html?id=102010302&column=采购合同"}" target="_blank" title="采购合同">采购合同</a>
            </div>
        </li>
        <li class="nav_list">
            <a href="${"${domain}/web/purchaserList/1.html?id=102010305&column=内控制度"}" target="_blank" class="nav_title" title="内控制度">内控制度</a>
            <div class="nav_sub"></div>
        </li>
        <li class="nav_list">
            <div class="nav_wrap">
                <a href="${"${domain}/web/purchaserList/1.html?id=102010303&column=需求"}" target="_blank" class="nav_title" title="需求">需求</a>
                <span>·</span>
                <a href="${"${domain}/web/purchaserList/1.html?id=102010304&column=验收"}" target="_blank" class="nav_title" title="验收">验收</a>
            </div>
            <div class="nav_sub"></div>
        </li>
        <li class="nav_list">
            <div class="nav_wrap">
                <a href="${"${domain}/web/purchaserList/1.html?id=102010203&column=专题"}" target="_blank" class="nav_title" title="专题">专题</a>
                <span>·</span>
                <a href="${"${domain}/web/purchaserList/1.html?id=102&column=资讯"}" target="_blank" class="nav_title" title="资讯">资讯</a>
            </div>
            <div class="nav_sub"></div>
        </li>
    </ul>
</div>
<script>
    setTimeout(function() {
        console.log($('.pop_center').height());

        $('.nav_list').hover(function () {
            $(this).children('.nav_pop').css('display', 'inline-block');
            $('.nav_pop').css('top', + -($(this).find('.pop_center').height() / 2 - 10) + 'px');
        }, function () {
            $(this).children('.nav_pop').css('display', 'none');
        })
    })

</script>